<template>
    <div class="login r-flex">
        <div class="r-flex__item">
            <div class="login-bg"></div>
        </div>
        <div class="white-box"></div>
        <div class="login-container">
            <div class="login-container--bg_back">
                <div class="login-title">
                    <img src="../../assets/images/logo.svg" class="logo" alt="yqrc.com"/>
                    <div class="dot">●</div>
                    <div class="name">CRM系统</div>
                </div>
                <el-form :model="model"
                         :rules="rules"
                         :inline-message="true"
                         :status-icon="true"
                         @submit.native.prevent>
                    <el-form-item>
                        <el-input v-model="model.username" placeholder="管理员">
                            <icon slot="prefix" name="user" class="el-input__icon"></icon>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input type="password" v-model="model.password" placeholder="密码">
                            <icon slot="prefix" name="lock" class="el-input__icon"></icon>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <div class="r-flex">
                            <div class="r-flex__item">
                                <el-input v-model="model.captcha" placeholder="验证码">
                                    <icon slot="prefix" name="captcha" class="el-input__icon"></icon>
                                </el-input>
                            </div>
                            <div class="captcha"></div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"
                                   icon="el-icon rc-icon rc-icon-login"
                                   :loading="loginLoading"
                                   @click="submitForm"> 登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="go-back">
                <router-link :to="{path: '/cms/login'}">
                    <el-link type="primary" :underline="false">
                        <icon name="back-line" class="go-back--icon"></icon>
                        <span>登</span>
                        <span>录</span>
                        <span>管</span>
                        <span>理</span>
                        <span>系</span>
                        <span>统</span>
                    </el-link>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class Login extends Vue {
  // form模型
  private model: any = {
    username: '',
    password: '',
    captcha: ''
  }

  // 验证规则
  private rules: any = {
    username: [
      {required: true, message: '填写管理员帐号', trigger: 'blur'}
    ],
    password: [
      {required: true, message: '填写密码', trigger: 'blur'}
    ],
    captcha: [
      {required: true, message: '填写验证码', trigger: 'blur'},
      {min: 4, message: '少于 4 个字符'}
    ]
  }

  private loginLoading: boolean = false

  /*----- 方法 -----*/
  private submitForm(name: string): void {
    this.loginLoading = !this.loginLoading

    setTimeout(() => {
      this.loginLoading = !this.loginLoading
    }, 30000);
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/element/element-variables.scss";

.login {
    flex: 1;
    position: relative;
    background-color: #f9fafc;
    &-bg {
        display: flex;
        flex: 1;
        height: 100vh;
        background: url("~@/assets/images/cms-login-bg.jpg") no-repeat 0 100%;
        background-size: cover;
    }
    //.white-box {
    //    width: 50%;
    //}
    &-title {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        .logo {
            width: 180px;
            height: auto;
        }
        .dot {
            margin: 15px 20px 0 20px;
            font-size: 15px;
        }
        .name {
            margin-top: 10px;
            font-size: 35px;
            font-weight: 500;
        }
    }
    &-container {
        position: absolute;
        top: 50%;
        left: 50%;
        //transform: translateY(-50%);
        transform: translate(-50%, -50%);
        max-width: 500px;
        width: 500px;

        &--bg_back {
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            padding: 50px;
            background-color: rgba(#fff, .8);
            box-shadow: 0 0 20px rgba(#000, .2);
            border-radius: 8px;
        }
        .go-back {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 50%;
            right: -70px;
            z-index: 1;
            transform: translateY(-50%);
            padding: 0 10px;
            width: 70px;
            height: 300px;
            background-color: rgba(#000, .5);
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;

            &--icon {
                margin-bottom: 10px;
                font-size: 24px;
            }

            span {
                display: inline-block;
            }

            .el-link {
                width: 30px;
                color: #fff;
                font-size: 26px;
                line-height: 1.1;
                text-align: center;
                &:hover {
                    color: rgba(#fff, .8);
                }
            }
        }
    }
}
.el-form {
    margin-top: 50px;
    padding: 0 30px;
    .el-input {
        font-size: 18px;
        ::v-deep .el-input__inner {
            padding-left: 40px;
            height: 56px !important;
            line-height: 56px !important;
            border-width: 2px;
            border-radius: 6px;
        }
        ::v-deep .el-input__prefix {
            width: 40px;
            .rc-icon {
                line-height: 50px;
            }
        }

    }

    .captcha {
        position: relative;
        overflow: hidden;
        margin-left: 10px;
        width: 120px;
        height: 50px;
        background-color: #bbb;
        border-radius: 6px;
    }

    .el-button {
        width: 100%;
        font-size: 18px;
        border-radius: 6px;
    }
}
</style>
